@charset "utf-8";
@import "common/reset";
@function c($px) {
    @return $px/2;
}

$color:#ff9344;
.web {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    header {
        position: absolute;
        padding: c(17px) 0 c(10px);
        width: 100%;
        .header_left {
            line-height: c(58px);
            text-align: center;
            button {
                margin-top: c(33px);
                width: c(123px);
                height: c(58px);
                border: 1px solid $color;
                background-color: white;
                border-radius: c(17px);
                font-size: c(26px);
                color: black;
            }
        }
        .header_star {
            width: c(163px);
            height: c(69px);
            margin-right: c(21px);
            margin-top: c(30px);
            position: relative;
            i {
                position: absolute;
                top: 0;
                right: 0;
                font-size: c(60px);
                color: $color;
            }
        }
        .header_center {
            p {
                text-align: center;
                padding-top: c(49px);
                font-size: c(26px);
                a {
                    color: black;
                }
            }
            position: relative;
            i {
                position: absolute;
                top: c(131px);
                right: c(284px);
                font-size: c(37px);
                color: $color;
            }
            input {
                width: c(270px);
                height: c(54px);
                border: 1px solid $color;
                border-radius: c(54px);
                margin-top: c(37px);
                margin-left: c(74px);
                padding-left: c(20px);
                font-size: c(24px);
                color: white;
            }
        }
    }
    section {
        width: 100%;
        position: absolute;
        left: 0;
        top: 71px;
        overflow-y: auto;
        bottom: 72px;
        padding: 0 c(20px);
        .kv{
            margin: 0 auto c(28px);
            width: c(705px);
            height: c(260px);
            
            img{
                width: 100%;
            }
        }
        .price{
           margin: 0 auto c(29px);
            width: c(664px);
            height: c(58px);
            p{
                color: $color;
                font-size: c(72px);
                line-height: c(60px);
                button{
                     width: c(111px);
                     height: c(60px);
                     text-align: center;
                     background-color: $color;
                     font-size: c(30px);
                     float: right;
                     border-radius: c(111px);
                     outline: none;
                     a{
                         color: white;
                     }
                }
            }
        }
        .evaluate{
            width: c(664px);
            height: c(35px);
            margin: 0 auto c(37px);
            p{ 
                
                font-size:c(30px);
                i{
                  font-size: c(37px);
                  color: $color;
                    
                }
                span{
                    color: $color;
                    font-size: c(30px);
                }
                span:nth-of-type(2){
                    float: right;
                    color: #8e8e8e;
                }
            }
        }
        .merchant{
            width: c(664px);
            height: c(67px);
            margin: 0 auto c(11px);
            background-color: $color;
            p{
                padding-left: c(12px);
                font-size: c(30px);
                color: white;
               line-height: c(67px);
               span{
                   float: right;
                   padding-right: c(11px);
                    i{
                   font-size: c(43px);
                   color: white;
               }
               }
              
            }
        }
        .store{
            width: c(664px);
            height: c(176px);
            margin: 0 auto c(10px);
            .store_img{
                 width: c(176px);
                 height: c(176px);
                 position: relative;
                 img{
                     width: 100%;
                 }
                 p{ 
                     width: 100%;
                     position: absolute;
                     background-color:rgba(255,255,255,0.5);
                     top: 50%;
                     left: 50%;
                     transform: translate(-50%,-50%);
                     text-align: center;
                     font-size: c(24px);
                 }
            }
            .store_introduce{
                width: c(460px);
                height: c(176px);
                padding-top: c(11px);
                margin-left: c(28px);
                position: relative;
                p{
                    font-size: c(30px);
                    font-weight: bold;
                    i{
                        color: $color;
                    }
                    span{
                        color: #929292;
                        font-size: c(26px);
                    }
                }
                p:nth-of-type(3){
                    color: #929292;
                    font-size: c(24px);
                    padding-top: c(6px);
                }
                 p:nth-of-type(4){
                    color: #ff9344;
                    font-size: c(20px);
                    padding-top: c(18px);
                }
                button{
                    position: absolute;
                    background-color: $color;
                    width: c(111px);
                    height: c(61px);
                    text-align: center;
                    line-height: c(61px);
                    border-radius: c(111px);
                    outline: none;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    a{
                        color: white;
                    }
                }
            }
        }
    }
    footer {
        padding: c(15px) 0;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        ul {
            li {
                width: 25%;
                text-align: center;
                a {
                    display: block;
                    color: #000000;
                    font-size: c(26px);
                    .my_icon {
                        color: $color;
                        font-size: c(72px);
                    }
                }
            }
        }
    }
}